<script>
import { mapGetters } from 'vuex'
import { paymentStatusArray } from '@/constants'

export default {
  name: 'pay',
  data() {
    return {
      /*获取月卡列表的分页参数*/
      pageParams: {
        page: 1,
        pageSize: 10,
        carNumber: undefined,
        paymentStatus: null
      },
      loading: false,
      paymentStatusArray
    }
  },
  methods: {
    /* 获取缴费列表的回调函数 */
    async fetchPayList() {
      try {
        this.loading = true
        await this.$store.dispatch('payStore/fetchPayList', this.pageParams)
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },
    /* 分页器size发生变化的回调函数 */
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.fetchPayList()
    },
    /* 分页器page发生变化的回调函数 */
    handleCurrentChange(page) {
      this.pageParams.page = page
      this.fetchPayList()
    },
    /* 点击搜索按钮的回调函数 */
    handleSearch() {
      this.pageParams.page = 1
      this.fetchPayList()
    },
    formatterPaymentStatus(row, column, cellValue, index) {
      const MAP = { 0: '未缴纳', 1: '已缴纳' }
      return MAP[row.paymentStatus] || '未知'
    },
    formatterChargeType(row, column, cellValue, index) {
      const MAP = { 'card': '月卡', 'temp': '临时停车' }
      return MAP[row.chargeType] || '未知'
    },
    formatterPaymentMethod(row, column, cellValue, index) {
      const MAP = { 'Alipay': '支付宝', 'WeChat': '微信', 'Cash': '线下' }
      return MAP[row.paymentMethod] || '--'
    }
  },
  computed: {
    ...mapGetters('payStore', ['total', 'payList'])
  },
  mounted() {
    this.fetchPayList()
  }
}
</script>

<template>
  <div class="pay">
    <el-card shadow="never">
      <el-form inline>
        <el-form-item label="车牌号码">
          <el-input size="small" placeholder="请输入车牌号码" v-model="pageParams.carNumber"></el-input>
        </el-form-item>
        <el-form-item label="缴纳状态">
          <el-select size="small" v-model="pageParams.paymentStatus" placeholder="请选择缴纳状态">
            <el-option v-for="(item) in paymentStatusArray" :value="item.value" :label="item.label"
              :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-plus" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-table size="small" border stripe :header-cell-style="{ backgroundColor: '#f4f6f8' }" :data="payList"
        v-loading="loading" element-loading-text="拼命加载中">
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <el-table-column label="车牌号码" prop="carNumber" align="center"></el-table-column>
        <el-table-column label="收费类型" :formatter="formatterChargeType" align="center"></el-table-column>
        <el-table-column label="停车总时长" prop="parkingTime" align="center"></el-table-column>
        <el-table-column label="缴纳费用（元）" prop="actualCharge" align="center"></el-table-column>
        <el-table-column label="缴纳状态" :formatter="formatterPaymentStatus" align="center"></el-table-column>
        <el-table-column label="缴纳方式" :formatter="formatterPaymentMethod" align="center"></el-table-column>
        <el-table-column label="缴纳时间" prop="paymentTime" align="center"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParams.page"
        :page-sizes="[10, 30, 40, 50]" :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total" background>
      </el-pagination>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.pay {
  padding: 10px 0;

  .el-card {
    margin-bottom: 10px;
  }

  .el-table {
    margin: 10px 0;
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
</style>
